<template>
    <div class="cx-details">
        <div class="cx-details-header">设备编辑<i class="iconfont icon-saoyisao" style="font-size:30px;" @click="scanNfc()"></i></div>
        <div class="list">
            <div>
                设备编号：<input type="text" v-model="list.equipId">
            </div>
            <div>
                设备名称：<input type="text" v-model="list.equipName">
            </div>
            <div>
                设备类型：<input type="text" v-model="list.equipType">
            </div>
            <div>
                RFID编码：<input type="text" v-model="list.frid">
            </div>
            <div>
                安装位置：<input type="text" v-model="list.equipLocation">
            </div>
            <div>
                设备型号：<input type="text" v-model="list.equipSize">
            </div>
            <div>
                功率(KW)：<input type="text" v-model="list.equipPower">
            </div>
            <div>
                设备原值：<input type="text" v-model="list.equipValue">
            </div>
            <div>
                GPS经度：<input type="text" v-model="list.equipX">
            </div>
            <div>
                GPS纬度：<input type="text" v-model="list.equipY">
            </div>
            <div>
                启用日期：<input type="text" v-model="list.equipUsedate">
            </div>
            <div>
                点位编号：<input type="text" v-model="list.SiteId">
            </div>
            <div>
                出厂日期：<input type="text" v-model="list.equipProdate">
            </div>
            <div>
                生产厂商：<input type="text" v-model="list.equipFactory">
            </div>
            <div>
                供货商：<input type="text" v-model="list.equipSupplier">
            </div>
            <div>
                检修周期：<input type="text" style="width:20%" v-model="list.equipCheckdate" onkeyup="value=value.replace(/[^\d]/g,'')">天
            </div>
            <div>
                润滑周期：<input type="text" style="width:20%" v-model="list.equipLubdate" onkeyup="value=value.replace(/[^\d]/g,'')">天
            </div>
            <div>
                设备流量：<input type="text" v-model="list.equipFlow" onkeyup="value=value.replace(/[^\d]/g,'')">
            </div>
            <div>
                设备扬程：<input type="text" v-model="list.equipLeft" onkeyup="value=value.replace(/[^\d]/g,'')">
            </div>
            <div>
                设备图片：
                <form class="uploadPicForm clearfix" id="uploadPicForm" enctype="multipart/form-data">
                    <div class="img1 clearfix" v-for="(urls, index) in imgs " :key="urls.value">
                        <div :class="{deleteBtn:!isImg}" class="delete clearfix" v-on:click="deleteImg(index)"><i class="iconfont icon-shanchu"></i></div>
                        <img class="img" :src="urls" />
                    </div>
                    <div class="addimg" v-on:click="imgClick()" v-if="this.fileList.length<1 && isImg">
                        <i class="iconfont icon-jiahao"></i>
                    </div>
                    <input style="float: left;  display: none;" type="file" id='uploadFile' accept="image/*" v-on:change="readLocalFile($event)">
                </form>
            </div>
            <div>

            </div>
        </div>
        <button :class="{btnBg:!isImg}" ref="addSafeBtn" type="button" class="btn btn-block btn-primary" @click="upequip">确定</button>

    </div>
</template>

<script>
import utils from '@/utils'
import {
    getUserInfo,
    setUserInfo,
    logout
} from '@/utils/auth'
export default {
    data() {
        return {
            dialogImageUrl: "",
            dialogVisible: false,
            list: {},
            isupload: false,
            imgs: [],
            files: [],
            fileList: [],
            isImg: true
        }
    },
    watch: {
        fileList() {
            this.list.equipFilepath = "";
            this.fileList.forEach(item => {
                this.list.equipFilepath += (item + ',');
            });
            this.list.equipFilepath = this.list.equipFilepath.substr(
                0,
                this.list.equipFilepath.length - 1
            );
        },
    },
    mounted() {
        this.getEquipdetail()
        window.addEventListener("setItemEvent", this.removeLister)
    },
    methods: {
        //删除图片
        deleteImg(index) {
            this.imgs.splice(index, 1);
            this.fileList.splice(index, 1);
        },
        //图片click
        imgClick() {
            document.getElementById("uploadFile").click();
        },
        //图片上传
        readLocalFile(e) {
            let localFile = document.getElementById("uploadFile").files[0];
            if (!localFile) {
                return
            }
            //开关控制
            this.isImg = false
            this.$refs.addSafeBtn.disabled = true
            // console.log(this.$refs.addSafeBtn.disabled)

            // console.log(document.getElementById("uploadFile").files)
            this.files.push(localFile)


            //获取图片base64代码
            var reader = new FileReader();
            var content;
            var current = this;
            content = reader.readAsDataURL(localFile, "UTF-8");

            reader.onload = function (event) {
                content = event.target.result;
                current.imgs.push(content);
            }
            reader.onerror = function (event) {
                alert('error')
            }

            // console.log(this.imgs)

            //上传
            var formData = new FormData();
            formData.append('file', this.files[this.files.length - 1]);
            // console.log(formData.get("file"))
            this.$api.chaxun.uploadUrl(formData).then(res => {
                if (res.success) {
                    this.$refs.addSafeBtn.disabled = false
                    this.$$tip({
                        content: '该图片上传成功！'
                    })
                    this.fileList.push(res.data)
                    this.isImg = true
                }
            }).catch(res => {
                console.log(res)
            });;
        },
        //根据ID获取设备详情
        getEquipdetail() {
            this.$api.chaxun.equipdetail({
                equipId: this.$route.query.equipId
            }).then(res => {
                if (res.success) {
                    this.list = res.data
                    if (res.data.equipFilepath != null) {
                        this.fileList.push(res.data.equipFilepath)
                        this.imgs.push(res.data.equipFilepath)
                    }

                }
            });
        },
        //修改设备信息
        upequip() {
            console.log(this.list.equipFilepath)
            this.$api.chaxun.upequip(this.list).then(res => {
                if (res.success) {
                    this.$$tip({
                        content: '修改成功'
                    })
                    this.$router.push({ path: 'number', query: { token: getUserInfo() } })
                    window.NfcScanInterface.clearHistory()
                }
            });
        },
        scanNfc() {
            window.addEventListener("setItemEvent", this.removeLister)
            window.NfcScanInterface.updateNfc()
        },
        removeLister(e) {
            if (e.key === 'frid') {
                // console.log(e.value)
                // window.removeEventListener('setItemEvent', this.xx)
                this.list.frid = e.value
            }
        }
    }
}
</script>

<style>
</style>
